<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聚衣源</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../lib/css/swiper.min.css">
    <link rel="stylesheet" href="../../lib/css/animate.min.css">
    <link rel="stylesheet" href="../../lib/css/elementui.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">
    <style rel="stylesheet" type="text/css">
        div.wroks-input{margin-right:28px;}
    </style>
</head>

<body>
    <div class="app-wrap container_960" v-cloak id="designer_join">
        <header-top></header-top>
        <common-login-head :text="show==1?'设计师入驻':'工作室入驻'"></common-login-head>
        <div class="designer_bg">
            <div class="designer_join container">
                <div class="designer_join-title">
                    <p @click="clickShow(1)" :class="{cur:show==1}">个人用户</p>
                    <p @click="clickShow(2)" :class="{cur:show==2}">工作室</p>
                </div>
                <!-- 个人用户 -->
                <div class="designer_join-con" v-show="show==1">
                    <div class="designer_join-con-col">
                        <h1>姓名：</h1>
                        <input type="text" class="input" v-model="personalName">
                    </div>
                    <div class="designer_join-con-col">
                        <h1>身份证号：</h1>
                        <input type="text" class="input" v-model="personalId">
                    </div>
                    <div class="designer_join-con-col">
                        <h1>联系方式：</h1>
                        <input type="text" class="input" v-model="personalTel">
                    </div>
                    <div class="designer_join-con-col">
                        <h1>城市：</h1>
                        <div class="option option_short" @mouseleave="closeOption($event)">
                            <p @click="clickShowOption($event)">{{personalProvinceText?personalProvinceText:"省"}}<i class="icon-company_entry_arr"></i></p>
                            <div class="option-sub">
                            <p v-for="item,index in personalProvinceList" @click="clickPersonalProvince(item.areaname,item.id,index)" :class="{cur:index==personalProvinceIndex}">{{item.areaname}}</p>
                            </div>
                        </div>
                        <div class="option option_short" @mouseleave="closeOption($event)">
                            <p @click="clickShowOption($event)">{{personalCityText?personalCityText:"市"}}<i class="icon-company_entry_arr"></i></p>
                            <div class="option-sub">
                                <p v-for="item,index in personalCityList" @click="clickPersonalCity(item.areaname,item.id,index)" :class="{cur:index==personalCityIndex}">{{item.areaname}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="designer_join-con-col designer_join-con-col_img">
                        <h1>头像：</h1>
                        <common-upimg :preimg="personalHeadImg" :testoption="{maxlength:1}"></common-upimg>
                    </div>
                    <div class="designer_join-con-col designer_join-con-col_img">
                        <h1>荣誉证书：</h1>
                        <common-upimg :preimg="personalHonorImg" :testoption="{maxlength:5}"></common-upimg>
                    </div>
                    <div class="designer_join-con-col designer_join-con-col_img">
                        <h1>作品：</h1>
                        <el-button type="text" @click="showWork(1)">{{personalWorkBtnShow?"添加作品":"作品已添加"}}</el-button>
                        <el-dialog title="添加作品" :visible.sync="personalDialogVisible" width="30%">
                            <div>
                                <!-- 个人用户 -->
                                <div class="designer_join-con" style="padding-left: 0px;">
                                    <div class="designer_join-con-col wroks-input">
                                        <h1>作品名称：</h1>
                                        <input type="text" class="input" v-model="personalWork.name">
                                    </div>
                                    <div class="designer_join-con-col wroks-input">
                                        <h1>作品简介：</h1>
                                        <input type="text" class="input" v-model="personalWork.describe">
                                    </div>
                                    <div class="designer_join-con-col wroks-input">
                                        <h1>类型：</h1>
                                        <el-select v-model="personalWork.type" placeholder="请选择" style="min-width: 224px;">
                                            <el-option v-for="(item,index) in personalWorkTypeOptions" :key="item.id"
                                            :label="item.name" :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="designer_join-con-col wroks-input">
                                        <h1>公开：</h1>
                                        <div class="option" @mouseleave="closeOption($event)" style="margin-right: 0px;">
                                            <p @click="clickShowOption($event)">{{personalWork.pub==1?"是（默认）":"否"}}<i class="icon-company_entry_arr"></i></p>
                                            <div class="option-sub">
                                                <p @click="clickWorkPub(1,1)" :class="{cur:personalWork.pub==1}">是（默认）</p>
                                                <p @click="clickWorkPub(1,2)" :class="{cur:personalWork.pub==2}">否</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="designer_join-con-col designer_join-con-col_img">
                                        <h1>从相册选择一张图：</h1>
                                        <common-upimg :preimg="personalWorksImg" :testoption="{maxlength:99}"></common-upimg>
                                    </div>
                                </div>
                            </div>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="confirmWork(1)">确 定</el-button>
                            </span>
                        </el-dialog>
                    </div>
                    <div class="designer_join-con-col designer_join-con-col_img">
                        <h1>主页封面：</h1>
                        <common-upimg :preimg="personalCoverImg" :testoption="{maxlength:1,minwidth:285,minheight:350}"></common-upimg>
                    </div>
                    <div class="designer_join-con-button">
                        <button @click="clickPersonaSubmit(1)">提交审核</button>
                    </div>
                </div>
                <!-- 工作室 -->
                <div class="designer_join-con" v-show="show==2">
                    <div class="designer_join-con-col">
                        <h1>企业名称：</h1>
                        <input type="text" class="input" v-model="studioName">
                    </div>
                    <div class="designer_join-con-col">
                        <h1>营业执照代码：</h1>
                        <input type="text" class="input" v-model="studioId">
                    </div>
                    <div class="designer_join-con-col">
                        <h1>联系方式：</h1>
                        <input type="text" class="input" v-model="studioTel">
                    </div>
                    <div class="designer_join-con-col">
                        <h1>城市：</h1>
                        <div class="option option_short" @mouseleave="closeOption($event)">
                            <p @click="clickShowOption($event)">{{studioProvinceText?studioProvinceText:"省"}}<i class="icon-company_entry_arr"></i></p>
                            <div class="option-sub">
                                <p v-for="item,index in studioProvinceList" @click="clickStudioProvince(item.areaname,item.id,index)" :class="{cur:index==personalProvinceIndex}">{{item.areaname}}</p>
                            </div>
                        </div>
                        <div class="option option_short" @mouseleave="closeOption($event)">
                            <p @click="clickShowOption($event)">{{studioCityText?studioCityText:"市"}}<i class="icon-company_entry_arr"></i></p>
                            <div class="option-sub">
                                <p v-for="item,index in studioCityList" @click="clickStudioCity(item.areaname,item.id,index)" :class="{cur:index==personalCityIndex}">{{item.areaname}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="designer_join-con-col designer_join-con-col_img">
                        <h1>头像：</h1>
                        <common-upimg :preimg="studioHeadImg" :testoption="{maxlength:1}"></common-upimg>
                    </div>
                    <div class="designer_join-con-col designer_join-con-col_img">
                        <h1>荣誉证书：</h1>
                        <common-upimg :preimg="studioHonorImg" :testoption="{maxlength:5}"></common-upimg>
                    </div>
                    <div class="designer_join-con-col designer_join-con-col_img">
                        <h1>作品：</h1>
                        <el-button type="text" @click="showWork(2)" v-if="studioWorkBtnShow">添加作品</el-button>
                        <el-button type="text" v-if="!studioWorkBtnShow">作品已添加</el-button>
                        <el-dialog title="添加作品" :visible.sync="studioDialogVisible" width="30%">
                            <div>
                                <!-- 工作室 -->
                                <div class="designer_join-con" style="padding-left: 0px;">
                                    <div class="designer_join-con-col wroks-input">
                                        <h1>作品名称：</h1>
                                        <input type="text" class="input" v-model="studioWork.name">
                                    </div>
                                    <div class="designer_join-con-col wroks-input">
                                        <h1>作品简介：</h1>
                                        <input type="text" class="input" v-model="studioWork.describe">
                                    </div>
                                    <div class="designer_join-con-col wroks-input">
                                        <h1>类型：</h1>
                                        <el-select v-model="studioWork.type" placeholder="请选择" style="min-width: 224px;">
                                            <el-option v-for="(item,index) in studioWorkTypeOptions" :key="item.id"
                                                       :label="item.name" :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="designer_join-con-col wroks-input">
                                        <h1>公开：</h1>
                                        <div class="option" @mouseleave="closeOption($event)">
                                            <p @click="clickShowOption($event)">{{studioWork.pub==1?"是（默认）":"否"}}<i class="icon-company_entry_arr"></i></p>
                                            <div class="option-sub">
                                                <p @click="clickWorkPub(2,1)" :class="{cur:studioWork.pub==1}">是（默认）</p>
                                                <p @click="clickWorkPub(2,2)" :class="{cur:studioWork.pub==2}">否</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="designer_join-con-col designer_join-con-col_img">
                                        <h1>从相册选择一张图：</h1>
                                        <common-upimg :preimg="studioWorksImg" :testoption="{maxlength:99}"></common-upimg>
                                    </div>
                                </div>
                            </div>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="confirmWork(2)">确 定</el-button>
                            </span>
                        </el-dialog>
                    </div>
                    <div class="designer_join-con-col designer_join-con-col_img">
                        <h1>主页封面：</h1>
                        <common-upimg :preimg="studioCoverImg" :testoption="{maxlength:1,minwidth:285,minheight:350}"></common-upimg>
                    </div>
                    <div class="designer_join-con-button">
                        <button @click="clickStudioSubmit(2)">提交审核</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="designer_bg">
            <common-login-footer class="pt-30 pb-60"></common-login-footer>
        </div>
    </div>
    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <script src="../../lib/js/swiper.min.js"></script>
    <script src="../../lib/js/elementui.min.js"></script>
    <script src="../../lib/js/area.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script>
        designer_join();
    </script>
</body>

</html>